<script lang="ts" setup>
import { computed, ref, inject, ComputedRef } from 'vue'
import { BizType } from '@/types/enum'
import { calculateRefundAmount } from '@/api/expense'
import { getToken } from '@/utils/cache/cookies'
import { debounce } from '@/utils'
import AnimatedPointLoading from '@/components/basic/animated-svg/AnimatedPointLoading.vue'
import TermInputNumberGroup from './TermInputNumberGroup.vue'
const props = defineProps<{
  orderId: string
}>()
interface MaxFormType {
  day: number
  hour: number
  minute: number
  overdueDay: number
  time: number
}
interface Form {
  day: number
  hour: number
  minute: number
}
// 注入一个值，若为空则使用提供的默认值
const bizType = inject<ComputedRef<BizType>>(
  'bizType',
  computed(() => BizType.BikeLongTerm)
)
const type = inject<ComputedRef<'0' | '1'>>(
  'type',
  computed(() => '0')
)

/** 天小时分 */
const form = defineModel<Form>('form', { required: true })
/** 天小时分 次卡 逾期费最大值 */
const maxValues = defineModel<MaxFormType>('maxValues', { required: true })
/** 退逾期费 天数 */
const days = defineModel<number>('overdueDay', { required: true })
/** 退次卡 次数 */
const times = defineModel<number>('times', { required: true })

const isRentAndTimesCardType = computed(() => {
  return bizType.value === BizType.BatteryTimesCard && type.value === '0'
})
const isRentAndDaysType = computed(() => {
  return bizType.value !== BizType.BatteryTimesCard && type.value === '0'
})
const isOverDueType = computed(() => {
  return type.value === '1'
})
const RefundDescription = computed(() => {
  if (isRentAndTimesCardType.value) {
    return '次数'
  } else if (isRentAndDaysType.value) {
    return '时长'
  } else if (isOverDueType.value) {
    return '天数'
  } else {
    return '天数'
  }
})

/** 计算出的金额 */
const calculateCount = ref<string>('')
/** 计算请求加载 */
const loading = ref<boolean>(false)
/** 获取请求参数 */
const getParamsData = () => {
  let calculateData: Record<string, any> = {}
  if (isRentAndTimesCardType.value) {
    calculateData.times = times.value
  } else if (isRentAndDaysType.value) {
    calculateData = form.value
  } else {
    calculateData.days = days.value
  }
  return {
    type: type.value,
    orderId: props.orderId,
    token: getToken() ?? '',
    ...calculateData
  }
}
/** 请求 */
const getRefundAmount = async () => {
  try {
    loading.value = true
    const res = await calculateRefundAmount(getParamsData())
    if (res.statusCode === '0') {
      calculateCount.value = res.data
      loading.value = false
    }
  } catch (error) {
    console.error(error)
  }
}
/**防抖 立刻请求 */
const debounceGetAmount = debounce(getRefundAmount, 1000, true)
debounceGetAmount()
</script>

<template>
  <el-form-item label="退款金额计算:" class="refund-amount-calculate">
    <div flex items-start>
      <span mr-5>如需退{{ RefundDescription }}为</span>
      <term-input-number-group
        :is-control="false"
        :fn="debounceGetAmount"
        v-model:form="form"
        v-model:maxValues="maxValues"
        v-model:overdue-day="days"
        v-model:times="times"
      />
      <div flex items-center>
        则可退金额为:
        <transition mode="out-in">
          <animated-point-loading size="16" v-if="loading" />
          <span v-else class="text-warning-light">{{ calculateCount }} </span>
        </transition>
        元
      </div>
    </div>
    <div class="text-[12px] text-[#999999]">
      该数据仅供参考，非实际扣除; 可退金额=(租金金额÷租赁时长或次数)*输入的时长或次数
    </div>
  </el-form-item>
</template>

<style scoped lang="scss"></style>
